<template>
	<view class="wrap">
		<g-header rtype="searchText" @rightclick="onSkipTap('searchResult')">
			<template v-slot:title>
				<view class="search">
					<icon type="search" size="16" color="#ccc"></icon>
					<input v-model="keyword" type="text" placeholder="请输入关键词搜索" placeholder-class="app_phc">
				</view>
			</template>
		</g-header>
		<view class="box">
			<view class="header">
				<view class="header-title">历史记录</view>
				<view class="header-R">
					<image src="../../static/images/icon-del-gray.png" mode="" style="width: 36rpx;height: 36rpx;">
					</image>
				</view>
			</view>
			<view class="main" @click="onSkipTap('searchResult')">
				<view class="item" v-for="(item, index) in recordList" :key="index">{{item.name}}</view>
			</view>
		</view>
		<!-- <view class="box">
			<view class="header">
				<view class="header-title">热门推荐</view>
				<view class="header-R">
					<image src="../../static/images/icon-refresh.png" mode="" style="width: 37rpx;height: 30rpx;">
					</image>
					<text>换一换</text>
				</view>
			</view>
			<view class="main" @click="onSkipTap('searchResult')">
				<view class="item">蕾丝布料</view>
				<view class="item">碎花边蕾丝布料</view>
				<view class="item">全棉布料</view>
				<view class="item">碎花</view>
				<view class="item">夏天薄款布料</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				recordList: []
			}
		},
		onLoad(options) {
			this.getRecord()
		},
		methods: {
			onSkipTap(type, index) {
				let urlObj = {
					searchResult: `/pages/takeOrder/searchResult?keyword=${this.keyword}`
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			async getRecord() {
				try {
					if (!this.gUserInfo?.userId) {
						await this.$store.dispatch('updateUserInfo')
					}
					const {
						data
					} = await this.$g_api.purchaseSearchRecord()
					this.recordList = data
				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.search {
		transform: translateX(-16rpx);
		width: 560rpx;
		height: 60rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		border-radius: 30rpx;
		background-color: #f2f2f2;

		input {
			flex: 1;
			margin-left: 20rpx;
		}
	}

	.box {}

	.header {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 30rpx;
	}

	.header-title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.header-R {
		display: flex;
		align-items: center;

		text {
			margin-left: 10rpx;
			font-size: 26rpx;
			color: #999;
		}
	}

	.main {
		padding: 0 14rpx 0 30rpx;
	}

	.item {
		display: inline-block;
		line-height: 28rpx;
		margin-right: 16rpx;
		margin-bottom: 20rpx;
		border-radius: 30rpx;
		padding: 16rpx 28rpx;
		font-size: 24rpx;
		background-color: #f2f2f2;
	}
</style>
